Relative sizing doesn’t scale 介面尺寸不該簡單按比例調整

很多人覺得，當調整介面大小時，所有元素都應該按相同的比例變化。比如，如果一個元素要縮小四分之一，其他元素也該縮小四分之一。但實際上，這種想法並不合適。

讓我們看一個例子：假設你在電腦螢幕上設計一篇文章。正文字型是18畫素，標題是45畫素。你可能會想把標題設定為正文的2.5倍大小。這樣做看起來很合理，對吧？

用這種相對大小的方式沒有問題。但是要注意，這種固定的比例關係並不是在所有情況下都適用。比如說，在電腦上2.5倍的大小看起來很好，但在手機上可能就不合適了。

具體來說，如果你把手機上的正文字型改小到14畫素，那標題按2.5倍計算就是35畫素。這個大小在手機螢幕上會顯得太大了！

在手機上，標題用20到24畫素可能更合適。這時標題只比正文大1.5到1.7倍，和電腦上的比例完全不同。這說明我們不應該固守某個固定的比例關係。

一個實用的建議是：螢幕變小時，大元素要縮小得更多，小元素縮小得少一些。這樣在小螢幕上，大小元素之間的差距就不會太大。

Relationships within elements 按鈕設計也是同樣的道理

比如說一個按鈕，它的字型大小是16畫素，左右有16畫素的空隙，上下有12畫素的空隙。很多人會想，改變按鈕大小時，這些數值應該保持固定比例。

雖然這樣做技術上可行，但未必是最好的選擇。如果我們讓大按鈕的空隙相對更大一些，小按鈕的空隙相對更小一些，效果會更好：這樣大按鈕看起來更突出，小按鈕則更緊湊，而不是簡單的整體放大縮小。

所以，不要執著於所有東西都要按比例變化。給自己更多靈活調整的自由，這樣才能在不同大小的螢幕上都做出好的設計。